<template>
    <el-card>
        <div slot="header">
            <span>账号列表</span>
        </div>

        <el-table :data="tableData"  @selection-change="selectionChange" ref="multipleTable">

            <!-- 多选框 -->
            <el-table-column type="selection" width="55"></el-table-column>

            <!-- 账号 -->
            <el-table-column label="账号" width="180">
                <template slot-scope="scope">
                    <div slot="reference">
                        <el-tag size="medium">{{ scope.row.account }}</el-tag>
                    </div>
                </template>
            </el-table-column>

            <!-- 用户组 -->
            <el-table-column label="用户组" width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.userGroup }}</span>
                </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column label="创建时间" width="180">
                <template slot-scope="scope">
                    <span >{{ scope.row.ctime | formater }}</span>
                </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑按钮弹出层 -->
        <el-dialog title="修改账号" :visible.sync="flag" width="400px">
            <el-form :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.account" autocomplete="off" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="用户组">
                    <el-select v-model="form.userGroup" placeholder="请选择用户组" style="width:200px">
                        <el-option label="普通用户" value="普通用户"></el-option>
                        <el-option label="超级管理员" value="超级管理员"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="flag = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页器 -->
        <!--
          分页
          属性：
            @size-change="sizeChange"  每页显示条数改变时触发
            @current-change="currentPage"  当前页码改变时触发
            :current-page="page"  当前在第几页上
            :page-sizes="[3, 10, 20, 40]"  每页显示多少条的选项
            :page-size="pageSize"  每页显示多少条
            layout="total, sizes, prev, pager, next, jumper"  页码栏的布局
            :total="400"  数据的总条数
        -->
        <div class="block">
            <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 25, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
            </el-pagination>
        </div>

        <!-- 批量删除、取消全选按钮 -->
        <div style="margin-top: 20px">
            <el-button @click="delAll()" type="danger">批量删除</el-button>
            <el-button @click="cancel()">取消选择</el-button>
        </div>
    </el-card>
</template>

<script>
// 引入公共用户请求
import {userList, userDel, userEdit, batchdel} from "@/api/user.js";
  export default {
    data() {
      return {
        tableData: [],  //用户数据

        // 分页器
        currentPage: 1,  //当前在第几页上
        pageSize: 5,  //每页显示多少条
        total: 0,  //总条数

        flag: false,  // 控制弹出框显示隐藏

        form: {
          account: "",
          userGroup: "",
          id: "",
        },

        rows: [],  //选中的行
      }
    },

    methods: {
        // 编辑按钮
        edit(row) {
            this.flag = true;
            this.form = row;
        },

        // 删除按钮
        async del(row) {
            let res = await userDel(row);
            if(res.data.code === 0){
                this.getData();
            }
        },

        // 确定按钮
        async confirm(){
            this.flag = false;
            await userEdit(this.form);
        },

        // 取消选择按钮
        cancel(rows) {
            this.$refs.multipleTable.clearSelection();
        },

        // 批量删除
        async delAll(){
            let ids = this.rows.map(v => {
                return v.id
            })
            await batchdel({ids: ids});
            this.getData();
        },

        // 选中的行
        selectionChange(val) {
            this.rows = val;
        },

        // 获取数据渲染到页面上
        async getData(){
            let res = await userList({currentPage: this.currentPage, pageSize: this.pageSize});
            this.total = res.data.total;  //总条数
            this.tableData = res.data.data;  //用户数据
        },

        // 分页器
        sizeChange(val) {
            this.pageSize = val;
            this.getData();  //点击分页器时渲染一次
        },
        currentChange(val) {
            this.currentPage = val;
            this.getData();
        }
    },

    created(){
        this.getData();  //刷新页面渲染一次
    },

    filters:{
        // 日期过滤器
        formater(time){
            let date = new Date(time);
            return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
        }
    }
  }
</script>

<style lang="less" scoped>
.el-table{
    margin-bottom: 20px;
}
</style>